<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    fundNo: "20250806130400486199",
    amount: "+110.05元",
    changedAmount: "200.00元",
    fundType: "收入",
    fundSource: "贝之幸艺术·广州教培小蓝卡·618限时198抢购5重豪",
    productName: "198元任选科目开团（老生选择开团）：八重豪礼+最高22节课",
    createdAt: "2021-09-01 10:00:00",
    updatedAt: "2021-09-01 10:00:00",
  },
  {
    fundNo: "20250806130400486188",
    amount: "+110.05元",
    changedAmount: "200.00元",
    fundType: "收入",
    fundSource: "贝之幸艺术·广州教培小蓝卡·618限时198抢购5重豪",
    productName: "198元任选科目开团（老生选择开团）：八重豪礼+最高22节课",
    createdAt: "2021-09-01 10:00:00",
    updatedAt: "2021-09-01 10:00:00",
  },
  {
    fundNo: "20250806130400486188",
    amount: "-110.05元",
    changedAmount: "200.00元",
    fundType: "退款",
    fundSource: "贝之幸艺术·广州教培小蓝卡·618限时198抢购5重豪",
    productName: "198元任选科目开团（老生选择开团）：八重豪礼+最高22节课",
    createdAt: "2021-09-01 10:00:00",
    updatedAt: "2021-09-01 10:00:00",
  },
  {
    fundNo: "20250806130400486188",
    amount: "-110.05元",
    changedAmount: "200.00元",
    fundType: "退款",
    fundSource: "贝之幸艺术·广州教培小蓝卡·618限时198抢购5重豪",
    productName: "198元任选科目开团（老生选择开团）：八重豪礼+最高22节课",
    createdAt: "2021-09-01 10:00:00",
    updatedAt: "2021-09-01 10:00:00",
  },
  {
    fundNo: "20250806130400486188",
    amount: "-110.05元",
    changedAmount: "200.00元",
    fundType: "退款",
    fundSource: "贝之幸艺术·广州教培小蓝卡·618限时198抢购5重豪",
    productName: "198元任选科目开团（老生选择开团）：八重豪礼+最高22节课",
    createdAt: "2021-09-01 10:00:00",
    updatedAt: "2021-09-01 10:00:00",
  },
]);

const modalVisible = ref(false);
</script>

<template>
  <umi-container :gap="16" bg-color="#f2f2f2" min-height="100vh" padding="16px">
    <umi-breadcrumb :items="['资金管理', '账户明细']"></umi-breadcrumb>
    <umi-row :gutter="10">
      <umi-col :span="12">
        <umi-card :border="false">
          <umi-statistic value="1999" title="累计收款(元)"></umi-statistic>
        </umi-card>
      </umi-col>
      <umi-col :span="12">
        <umi-card :border="false">
          <umi-statistic value="1999" title="累计退款(元)"></umi-statistic>
        </umi-card>
      </umi-col>
    </umi-row>
    <umi-search-card>
      <umi-row :gutter="16">
        <umi-col :span="8">
          <umi-form-item label="流水单号">
            <umi-input placeholder="请输入流水单号"></umi-input>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="资金来源">
            <umi-input placeholder="请输入活动场次的名称"></umi-input>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="商品名称">
            <umi-input placeholder="请输入申请单号"></umi-input>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="资金类型">
            <umi-select>
              <umi-option value="1">收入</umi-option>
              <umi-option value="2">退款</umi-option>
            </umi-select>
          </umi-form-item>
        </umi-col>
        <umi-col :span="8">
          <umi-form-item label="交易时间">
            <umi-datepicker-range></umi-datepicker-range>
          </umi-form-item>
        </umi-col>
      </umi-row>
    </umi-search-card>
    <umi-card :border="false">
      <umi-table :data="dataList">
        <template #columns>
          <umi-table-column title="序号" data-index="id" :width="60"></umi-table-column>
          <umi-table-column title="流水单号" data-index="fundNo" :width="200"></umi-table-column>
          <umi-table-column title="资金来源" slot-name="fundSource"></umi-table-column>
          <umi-table-column title="商品名称" slot-name="productName"></umi-table-column>
          <umi-table-column title="资金类型" data-index="fundType" :width="100"></umi-table-column>
          <umi-table-column title="操作金额" data-index="amount" :width="100"></umi-table-column>
          <umi-table-column title="交易后金额" data-index="changedAmount" :width="100"></umi-table-column>
          <umi-table-column title="交易时间" data-index="createdAt" :width="160"></umi-table-column>
        </template>
        <template #productName="{ record }">
          <umi-text :ellipsis="200">{{ record.productName }}</umi-text>
        </template>
        <template #fundSource="{ record }">
          <umi-text :ellipsis="200">
            <a href="">{{ record.fundSource }}</a>
          </umi-text>
        </template>
        <template #action>
          <umi-space :size="10">
            <umi-popconfirm message="您确认同意么？">
              <umi-button type="primary">同意</umi-button>
            </umi-popconfirm>
            <umi-button type="danger" @click="modalVisible = true">拒绝</umi-button>
          </umi-space>
        </template>
        <template #status="{ record }">
          <umi-label>{{ record.status }}</umi-label>
        </template>
        <template #wxinfo="{ nickName, userId }">
          <umi-user-info :nick-name="nickName" :user-id="userId"></umi-user-info>
        </template>
        <template #money="{ record }">
          <umi-text color="red" v-if="record.type === 1">{{ record.money }}</umi-text>
          <umi-text color="#6DD400" v-else="">{{ record.money }}</umi-text>
        </template>
      </umi-table>
    </umi-card>
  </umi-container>
  <umi-modal width="500px" v-model:visible="modalVisible">
    <umi-container padding="16px 0">
      <umi-form>
        <umi-form-item label="拒绝原因" required>
          <umi-textarea></umi-textarea>
        </umi-form-item>
      </umi-form>
    </umi-container>
  </umi-modal>
</template>
